import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

import { TopHeader } from '../../components';

import './index.scss'


@inject('courseListStore')
@inject('chapterListStore')
@inject('baseStore')
@inject('entry05Store')
@observer
class Entry05 extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			type: 0
		};
	}

	pageChangeNoticeToServer = () => {
		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: "/entry_04"
			}
		};
		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.socket.emit("teach_app_to_server", data);
	}

	componentDidMount() {

		this.pageChangeNoticeToServer();

		this.props.baseStore.topHeader.title = "书法空间";
		this.props.baseStore.topHeader.show = true;
		this.props.baseStore.topHeader.backTo = '/entry';


		var type = this.props.match.params.type || 0;

		type == 0 && this.props.entry05Store.GetWritingKnowledgeList();
		type == 1 && this.props.entry05Store.GetWritingStoryList();


		console.log(type, "==========type=========");


		this.setState({
			type: parseInt(type)
		})

		//点击后再拉这个
		//this.props.entry05Store.GetWritingStoryList();


	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}

	changeTypeClick = (index) => {
		this.setState({
			type: index
		})
		index == 0 && this.props.entry05Store.GetWritingKnowledgeList();
		index == 1 && this.props.entry05Store.GetWritingStoryList();
	}

	toShowPage = (index) => {
		this.props.history.push('/entry_0501/' + this.state.type + "/" + index);
	}

	componentWillReceiveProps(props) {
		console.log(props);
	}

	getEachShow(item) {
		var showDiv;
		//优化图片  //否则视频
		if ((item.ImageURL && item.ImageURL.length > 0)) {
			showDiv = <img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" />

			if (item.VideoURL && item.VideoURL.length > 0) {
				showDiv = <>
					<img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" />
					<div className="paly_mask">
					</div>
					<div className="paly_btn"></div>
				</>
			}


		} else {
			if (item.VideoURL && item.VideoURL.length > 0) {
				showDiv = <iframe src={"../../../baoli.html?width=460&height=340&autoplay=0&key=" + item.VideoURL} />
			} else {
				//默认图片  并放播放按纽
				showDiv = <img src="" alt="" />
			}
		}
		return showDiv;
	}

	render() {


		var mainContainerCls = "main_container"

		if (this.state.type === 0 && this.props.entry05Store.know_list_one && this.props.entry05Store.know_list_one.length > 6) {
			mainContainerCls += " has_scroll_bar";
		}

		if (this.state.type === 1 && this.props.entry05Store.know_list_two && this.props.entry05Store.know_list_two.length > 6) {
			mainContainerCls += " has_scroll_bar";
		}

		var each_entry = "each_entry ";



		return (
			<div className="Entry05 page_container animated fadeInDown  fast">
				<div className="side_wrap">
					<div className="side_body">
						<div className={this.state.type == 0 ? "each_entry active" : "each_entry "} onClick={() => { this.changeTypeClick(0) }}></div>
						<div className={this.state.type == 1 ? "each_entry two active" : "each_entry two "} onClick={() => { this.changeTypeClick(1) }}></div>
					</div>
				</div>
				<div className="main_wrap">
					<div className={mainContainerCls}>

						{
							this.state.type === 0 && this.props.entry05Store.know_list_one && this.props.entry05Store.know_list_one.map((item, index) => {
								return (
									<div className="book_each" key={index} onClick={() => this.toShowPage(index)}>
										<div className="img_container">
											{
												this.getEachShow(item)
											}
										</div>

										<div className="book_each_name">{item.DirectoryName}</div>
									</div>
								)
							})
						}

						{
							this.state.type == 1 && this.props.entry05Store.know_list_two && this.props.entry05Store.know_list_two.map((item, index) => {
								return (
									<div className="book_each" key={index} onClick={() => this.toShowPage(index)}>
										<div className="img_container">
											{
												this.getEachShow(item)
											}
										</div>
										<div className="book_each_name">{item.DirectoryName}</div>
									</div>
								)
							})
						}


					</div>


				</div>




			</div>
		);
	}
}

export default Entry05;